<template>
    <div class="card" >
        <div class="card-image-container">
            <img :src="image" alt="Card Image" class="card-image" />
            <div class="card-image-overlay"></div>
            <div class="card-hint"></div>
        </div>
        <div class="card-content">
            <h2>{{ title }}</h2>
            <p>{{ description }}</p>
        </div>
    </div>
</template>  
    
<script>
export default {
    name: 'Card',
    props: {
        image: {
            type: String,
            required: true,
        },
        title: {
            type: String,
            required: true,
        },
        description: {
            type: String,
            required: true,
        },
    },
};
</script>  
    
<style scoped>  .card {
      width: 550px;
      position: relative;
      border: 1px solid #ccc;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 20px;
      transition: 0.3s ease;
  }

  .card-image-container {
      position: relative;
      /* 为绝对定位的子元素提供上下文 */
      width: 100%;
      height: 450px;
      overflow: hidden;
  }

  .card-image {
      width: 100%;
      height: 450px;
      object-fit: cover;
      transition: 0.3s ease;
  }

  .card-image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0);
      /* 初始时透明 */
      transition: background-color 0.3s ease;
      /* 添加过渡效果 */
      z-index: 1;
  }
  .card:hover {
      box-shadow: 15px 15px 10px rgba(0, 0, 0, 0.5);
  }

  .card-content {
      padding: 15px;
  }

  .card-content h2 {
      margin-top: 0;
      font-size: 18px;
  }

  .card-content p {
      margin-top: 10px;
      font-size: 10px;
      line-height: 1.6;
  }

  .card-hint {
      text-decoration: underline;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: blue;
      font-size: 15px;
      text-align: center;
      font-weight: bold;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;

  }

  .card:hover .card-hint {
      opacity: 1;
  }
</style>